<template>
  <div ref="propertyPanel" class="property-panel">
    <div class="title">
      {{ elementName }}
      <div class="ant-modal-close-x">
        <i @click="close" class="el-icon-close"></i>
      </div>
    </div>
    <div style="padding: 10px 10px 0 10px; font-size: 14px; font-weight: bold">
      {{ this.modelData ? this.modelData.cellInfo_data : "" }}
    </div>
    <component
      ref="_component"
      :is="getComponent"
      v-if="modelData"
      :modelCode="modelCode"
      @changeData="changeData"
    />
  </div>
</template>
<script>
import { cloneDeep } from "lodash"
import BRCodeConfig from "./__components__/BRCodeConfig"
import QRCodeConfig from "./__components__/QRCodeConfig"
import GlobalConfig from "./__components__/GlobalConfig"
import DateConfig from "./__components__/DateConfig"
import NumberConfig from "./__components__/NumberConfig"

export default {
  props: {
    modelCode: {
      type: String,
      required: true,
    },
  },
  components: {
    BRCodeConfig,
    QRCodeConfig,
    GlobalConfig,
    DateConfig,
    NumberConfig,
  },
  computed: {
    elementName() {
      //1全局配置 2二维码配置 3条码配置 4日期 5金额、数值
      return this.type === 1
        ? "全局配置"
        : this.type === 2
        ? "二维码配置"
        : this.type === 3
        ? "条码配置"
        : this.type === 4
        ? "日期配置"
        : this.type === 5
        ? "数值、金额配置"
        : "全局配置"
    },
    getComponent() {
      return this.type === 1
        ? "GlobalConfig"
        : this.type === 2
        ? "QRCodeConfig"
        : this.type === 3
        ? "BRCodeConfig"
        : this.type === 4
        ? "DateConfig"
        : this.type === 5
        ? "NumberConfig"
        : "GlobalConfig"
    },
  },
  data() {
    return {
      type: 1,
      modelData: null,
    }
  },
  methods: {
    init(data) {
      this.type = data.type
      this.modelData = cloneDeep(data)
      this.$nextTick(() => {
        this.$refs._component && this.$refs._component.init(data)
      })
    },
    changeData(data) {
      this.$emit("changeData", data)
    },
    close() {
      this.$emit("closePanel")
      this.modelData = null
    },
  },
}
</script>
<style lang="scss">
.property-panel {
  height: 100%;
  .title {
    padding: 0 10px;
    font-weight: bold;
    line-height: 44px;
    background: #fafafa;
    border-bottom: 1px solid #e4ebf0;
    position: relative;
    .ant-modal-close-x {
      position: absolute;
      top: 0;
      right: 0;
      display: block;
      width: 44px;
      height: 44px;
      font-size: 16px;
      font-style: normal;
      line-height: 44px;
      text-align: center;
      text-transform: none;
      text-rendering: auto;
      cursor: pointer;
      i {
        font-size: 18px;
      }
    }
  }

  // reset element css
  .el-form {
    padding: 10px 10px;
    height: calc(100% - 54px);
    overflow-y: auto;
  }
  .el-form-item {
    margin-bottom: 10px;
  }
  .el-form--label-top .el-form-item__label {
    padding: 0;
    color: #99a9bf;
  }
  .node-name {
    border-bottom: 1px solid #ccc;
    padding: 0 0 10px 20px;
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: bold;
    color: #444;
  }
}
</style>
